// 滑动滚轮切换头部导航
function navShow() {
    var header = document.querySelector(".header")
    var headerScroll = document.querySelector(".header-scroll")
    window.onscroll = function() {
        var docTop = document.documentElement.scrollTop
        if (docTop >= 500) {
            header.classList.remove("show")
            headerScroll.classList.add("show")
        } else {
            header.classList.add("show")
            headerScroll.classList.remove("show")
        }
    }
}
// 轮播图
function banner() {
    var item = document.querySelector(".item") //获取图片的父容器
    var tabList = document.querySelectorAll(".banner .item .banner-a") //获取每一个图片
    var dot = document.querySelectorAll(".banner .dots .dot") //轮播图中的下面的园
    var pageList = document.querySelectorAll(".page a") //轮播图中的两个翻页
    var banner = document.querySelector(".banner") //banner容器
    var index = 0 //用来获取tabList中的data-index 的下标
    var timer //定时器名
    var len = tabList.length //获取tabList的长度
    var width //banner的宽度

    // 判断浏览器可视宽度是否改变 window.onresize

    // 如果改变浏览器宽度则会直接获取当前宽度 
    // 如果不设置则有可能在浏览器宽度变宽窄时会出现图片跑过头一点
    window.onresize = function() {
        width = parseInt(getComputedStyle(banner).width)
        if (width !== parseInt(item.style.transform.substr(12))) {
            item.style.transform = "translate3d(-" + index * width + "px,0px,0px)"
        }

    }

    // 上一页
    pageList[0].onclick = function() {
        clearInterval(timer)
        index = index - 1
        if (index === -1) {
            index = len - 1
        }
        clearActive()
        carousel()
    }

    // 下一页
    pageList[1].onclick = function() {
        clearInterval(timer)
        index = index + 1
        if (index === len) {
            index = 0
        }
        clearActive()
        carousel()
    }

    // 自动轮播
    function carousel() {
        timer = setInterval(function() {
            index++
            if (index === len) {
                index = 0
            }
            clearActive()

            // dot[index].classList.add("active")
            // item.style.transform = "translate3d(-" + index * 1903 + "px,0px,0px)"
        }, 3000)
    }
    // 清除并添加样式
    function clearActive() {
        width = parseInt(getComputedStyle(banner).width)
        for (var j = 0; j < len; j++) {
            dot[j].classList.remove("active")
            dot[index].classList.add("active")
            item.style.transform = "translate3d(-" + index * width + "px,0px,0px)"
        }
    }
    // 点击超链接可以跳转到指定的位置
    function dots() {
        for (var i = 0; i < len; i++) {
            dot[i].onclick = function() {
                clearInterval(timer)
                index = this.dataset.index
                clearActive()

                // this.classList.add("active")
                // item.style.transform = "translate3d(-" + index * 1903 + "px,0px,0px)"
                carousel()
            }
        }
    }
    carousel()
    dots()
}
// tab切换
function title() {
    var titleList = document.querySelectorAll(".main-left .main-title  li")
    var contList = document.querySelectorAll(".main .content .cont")
    var navLi = document.querySelectorAll(".header-scroll .headerBox .timeFlow-box .menu-item li")
    var navA = document.querySelectorAll(".header-scroll .headerBox .timeFlow-box .ss-tabs .a")
    var navTitle = document.querySelector(".header-scroll .headerBox .timeFlow-box .activeText")
    var cur
    var len = titleList.length
    var index
    var html = ""
        // 点击标题切换内容
    for (var i = 0; i < len; i++) {
        titleList[i].onclick = function() {
            index = this.dataset.index
            cur = this.dataset.cur
            clear()
            scroll()
        }
    }
    // 清除并添加样式
    function clear() {
        for (var j = 0; j < len; j++) {
            titleList[j].classList.remove("active")
            contList[j].classList.remove("cont-block")
        }
        for (var y = 0; y < navLi.length; y++) {
            navLi[y].classList.remove("none")
        }
        for (var z = 0; z < 2; z++) {
            navA[z].classList.remove("acive")
        }
        if (index < 2) {
            navA[index].classList.add("acive")
            navTitle.classList.remove("active")
        } else {
            navLi[cur].classList.add("none")
            html = navLi[cur].innerHTML
            navTitle.classList.add("active")
            navTitle.innerHTML = html
        }
        contList[index].classList.add("cont-block")
        titleList[index].classList.add("active")

    }
    //  点击头部隐藏的导航切换内容
    for (var x = 0; x < navLi.length; x++) {
        navLi[x].onclick = function() {
            index = this.dataset.index
            cur = this.dataset.cur
            clear()
            scroll()
        }
    }
    // 点击的两个导航栏
    for (var z = 0; z < 2; z++) {
        navA[z].onclick = function() {
            index = this.dataset.index
            clear()
            scroll()
        }
    }

}
// 返回顶部
function getTop() {
    var arrows = document.querySelector(".fiex .jiantou")
    arrows.onclick = function() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        })
    }
}
// 滚动加载
function scroll() {
    var contList = document.querySelectorAll(".main .main-left .content .cont")
    var len = contList.length
    var winHeight = document.documentElement.clientHeight
    var dataList = data.data
    var current = 0
    var flag = true
    for (var i = 0; i < len; i++) {
        var selectStyle = contList[i].className.indexOf("cont-block");
        if (selectStyle != -1) {
            var index = i
            var html = ""
            addEventListener("scroll", function() {
                var docHeight = document.documentElement.getBoundingClientRect().height
                var scrollTop = document.documentElement.scrollTop
                if (flag) {
                    if (winHeight + scrollTop >= docHeight - 10) {
                        current++
                        for (var i = (current - 1); i < current; i++) {
                            if (i < dataList.length) {
                                html = `
                            <div class="articleCard">
                                <a class="articleCard-left" href="#">
                                    <img class="loading" src="https://cdn.sspai.com/${dataList[i].banner}" data-scr="https://cdn.sspai.com/${dataList[i].banner}" alt="">
                                </a>
                                <div class="articleCard-right">
                                    <a class="pc_card">${dataList[i].title}</a>
                                    <div class="card_bottom">
                                        <div class="left">
                                            <img   class="loading"  src="https://cdn.sspai.com/${dataList[i].author.avatar}" data-src="https://cdn.sspai.com/${dataList[i].author.avatar}" alt="">
                                            <span class="text">${dataList[i].author.nickname}</span>
                                            <span class="small">7小时前</span>
                                        </div>
                                        <div class="right">
                                            <i class="iconfont icon-shandian"></i>
                                            <span>39</span>
                                            <i class="iconfont icon-pinglun"></i>
                                            <span>20</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            `
                            }
                            if (i == 9) {
                                html += "<div>已经加载完了</div>"
                                flag = false
                                break
                            }
                        }
                        contList[index].innerHTML += html
                    }
                }

            })
        }
    }
}
// 搜索框隐藏显示
function seach() {
    var html = document.querySelector("html")
    var container = document.querySelector(".seach-shade")
    var change = document.querySelector(".seach-shade .search-input .keywords .change")
    var itemList = document.querySelectorAll(".seach-shade .search-input .keywords .key-text .item")
    var btn1 = document.querySelector(".header .headerBox .userBox .icon-sousuo")
    var btn2 = document.querySelector(".header-scroll .headerBox .userBox .icon-sousuo")
    var user = document.querySelector(".header-scroll .headerBox .userBox .btn")


    function toggleActive(el) {
        if (el.className.indexOf("icon-sousuo")) {
            if (el.className.indexOf("icon-sousuo") === -1) {
                el.classList.add("icon-sousuo")
                el.classList.remove("icon-cuo")
                container.classList.remove("op1")
                    // 
                html.style.overflow = "visible";


            } else {
                el.classList.remove("icon-sousuo")
                el.classList.add("icon-cuo")
                container.classList.add("op1")
                    // 
                html.style.overflow = "hidden";

                flag = false
            }
        }
    }


    function onclickBtn(e) {
        var flag = true
        toggleActive(btn1)
        toggleActive(btn2)
    }
    btn1.addEventListener("click", onclickBtn)
    btn2.addEventListener("click", onclickBtn)
    var arr = [
        [
            "数字消费",
            "摄影与录像",
            "具透",
            "腾讯",
            "社交",
            "读书笔记",
            "Chrome"
        ],

        [
            "Workflow",
            "应用推荐",
            "浏览器",
            "思维导图",
            "App+1",
            "开发者",
            "应用合辑"
        ],
        [
            "window",
            "捷径",
            "印象笔记",
            "具透",
            "购物",
            "运动",
            "APP推荐"
        ]
    ]

    function exchange() {
        var index = 0
        change.onclick = function() {
            index++
            var len = arr[0].length
            if (index >= arr.length) {
                index = 0
            }
            for (var i = 0; i < len; i++) {
                itemList[i].innerHTML = arr[index][i]
            }
        }
    }
    exchange()

}
// 点击显示登陆界面
function onclickShowLogin() {
    var btn1 = document.querySelector(".header .userBox .btn")
    var btn2 = document.querySelector(".header-scroll .userBox .btn")
    var btn3 = document.querySelector(".pen")
    var loginShade = document.querySelector(".login-shade")
    var close = document.querySelector(".login-shade .el-dialog .icon-cuowu")
    btn1.onclick = function() {
        if (!loginShade.classList.contains("login-show")) {
            loginShade.classList.add("login-show")
        }

    }
    btn2.onclick = function() {
        if (!loginShade.classList.contains("login-show")) {
            loginShade.classList.add("login-show")
        }

    }
    btn3.onclick = function() {
        if (!loginShade.classList.contains("login-show")) {
            loginShade.classList.add("login-show")
        }

    }
    close.onclick = function() {
        loginShade.classList.remove("login-show")
    }

}
// 登陆互动解锁
function loginSlideToUnlock() {
    var shade = document.querySelector(".login-shade")
    var scroll = document.querySelector(".form-box .scroll")
    var block = document.querySelector(".form-box .scroll .scroll-block")
    var bg = document.querySelector(".form-box .scroll .scroll-bg")
    var show = document.querySelector(".form-box .scroll .scroll-text-opt")
    var maxWidth = scroll.clientWidth - block.clientWidth
    var lastX
    console.log(show);

    block.onmousedown = function(e) {
        var startX = e.clientX
        block.classList.remove("tran")
        bg.classList.remove("tran")
        console.log(startX);
        document.onmousemove = function(e) {
            lastX = e.clientX - startX
            lastX = lastX < 0 ? 0 : lastX
            lastX = lastX > maxWidth ? maxWidth : lastX
            block.style.transform = " translate3d(" + lastX + "px,0,0)"
            bg.style.width = lastX + "px"
        }
    }
    shade.onmouseup = function() {
        document.onmousemove = null;
        if (lastX === maxWidth) {
            block.style.transform = " translate3d(" + maxWidth + "px,0,0)";
            bg.style.width = maxWidth + "px"
            block.onmousedown = null;
            show.style.opacity = 1
            show.style.zIndex = 10
            show.classList.add("opt")
        } else {
            lastX = 0;
            block.classList.add("tran")
            bg.classList.add("tran")
            block.style.transform = " translate3d(0,0,0)";
            bg.style.width = "0px"

        }
    }


}

function init() {
    navShow()
    banner()
    title()
    getTop()
    scroll()
    seach()
    onclickShowLogin()
    loginSlideToUnlock()
}
init()